<template>
  <el-card class="container">
    <template #header>
      <div class="card-header">
        <span>
          <el-button
            v-if="scene === 1"
            :icon="ArrowLeft"
            link
            type="primary"
            @click="scene = 0"
            >返回列表</el-button
          >就诊人管理</span
        >
        <el-button
          v-if="scene === 0"
          :icon="User"
          type="primary"
          @click="addUser"
          >新增
        </el-button>
      </div>
    </template>
    <!-- 就诊人列表   -->
    <div v-if="scene === 0" class="visitors">
      <Visitor
        v-for="(user, index) in visitorUserList"
        :key="user.id"
        :del="true"
        :index="index"
        :user="user"
        class="item"
        @changeScene="changeScene"
        @removeUser="delUser"
      />
    </div>
    <!--  就诊人信息,添加/修改  -->
    <div v-else-if="scene === 1" class="form">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form :model="visitorUser" style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input v-model="visitorUser.name" placeholder="请输入用户姓名" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="visitorUser.contactsCertificatesType">
            <el-option
              v-for="item in certificateTypes"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            v-model="visitorUser.certificatesNo"
            placeholder="请输入证件号码"
          />
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="visitorUser.sex" class="ml-4">
            <el-radio :value="0" size="large">女</el-radio>
            <el-radio :value="1" size="large">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="visitorUser.birthdate"
            placeholder="请选择出生日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="visitorUser.phone" placeholder="" />
        </el-form-item>
      </el-form>
      <el-divider content-position="left"
        >建档信息（完善后部分医院首次就诊不排队建档）
      </el-divider>
      <el-form :model="visitorUser" style="width: 60%; margin: 10px auto">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="visitorUser.isMarry" class="ml-4">
            <el-radio :value="0" size="large">未婚</el-radio>
            <el-radio :value="1" size="large">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="visitorUser.isInsure" class="ml-4">
            <el-radio :value="0" size="large">自费</el-radio>
            <el-radio :value="1" size="large">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader :props="props" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="visitorUser.address"
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <el-form :model="visitorUser" style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input v-model="visitorUser.contactsName" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="visitorUser.contactsCertificatesType">
            <el-option
              v-for="item in certificateTypes"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            v-model="visitorUser.contactsCertificatesNo"
            placeholder="请输入证件号码"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="visitorUser.contactsPhone"
            placeholder="请输入手机号码"
          />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" name="Patient" setup>
import { ArrowLeft, User } from "@element-plus/icons-vue";
import { doGetVisitingUser } from "@/api/hosiptal";
import { DictData, VisitingUser } from "@/types/types.ts";
import { onMounted, reactive, ref, watch } from "vue";
import { doFindByDictCode } from "@/api/home";
import { DictCodeEnums } from "@/types/enums.ts";
import { doFindByParentId } from "@/api/common.ts";
import type { CascaderProps } from "element-plus";
import {
  doAddUser,
  doDelUser,
  doGetUserDetail,
  doUpdateUser,
} from "@/api/user.ts";
import { useRoute } from "vue-router";
import router from "@/router";
// 就诊人列表
let visitorUserList = ref<VisitingUser[]>([] as VisitingUser[]);
// 场景
let scene = ref(0);
// 证件类型
let certificateTypes = ref<DictData[]>([]);
// 就诊人详情
//let visitorUser = ref<VisitingUser>({} as VisitingUser);
let visitorUser = reactive({} as VisitingUser);

let route = useRoute();
onMounted(() => {
  // 获取就诊人信息
  getVisitingUser();
  // 获取证件类型
  getCertificateType();
});
watch(
  () => visitorUserList.value,
  () => {
    // 证件类型
    if (route.query.type === "add") {
      scene.value = 1;
    } else if (route.query.type === "edit") {
      let user = visitorUserList.value.find(
        (item) => item.id == route.query.id,
      );
      Object.assign(visitorUser, user);
    } else {
      scene.value = 0;
    }
  },
);
// 获取就诊人信息
const getVisitingUser = async () => {
  await doGetVisitingUser().then((res) => {
    if (res.code === 200) {
      visitorUserList.value = res.data;
    }
  });
};
// 新增就诊人
const addUser = () => {
  scene.value = 1;
};
// 切换场景
const changeScene = async (user: VisitingUser) => {
  scene.value = 1;
  // await doGetUserDetail(user.id)
  //Object.assign(visitorUser, user);
  Object.assign(visitorUser, await doGetUserDetail(user.id));
};
// 获取证件类型
const getCertificateType = async () => {
  let result = await doFindByDictCode(DictCodeEnums.CERTIFICATES_TYPE);
  if (result.code === 200) {
    certificateTypes.value = result.data;
  }
};
//级联选择器
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    // 获取一级城市列表
    let resultCity = await doFindByParentId(
      node.data.id || DictCodeEnums.NATION,
    );
    // 整理数据
    let showData = resultCity.map((item: any) => {
      return {
        id: item.id,
        label: item.name,
        value: item.value,
        leaf: !item.hasChildren,
      };
    });
    resolve(showData);
  },
};
// 添加或更新就诊人
const addOrUpdate = async () => {
  if (visitorUser.id) {
    await doUpdateUser(visitorUser);
  } else {
    await doAddUser(visitorUser);
  }
  if (route.query.type === "add") {
    router.back();
  } else {
    scene.value = 0;
    // 获取就诊人信息
    getVisitingUser();
  }
};
// 重置表单数据
const reset = () => {
  Object.assign(visitorUser, {} as VisitingUser);
};
// 删除就诊人
const delUser = () => {
  // 获取就诊人信息
  getVisitingUser();
};
</script>

<style lang="scss" scoped>
.container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .visitors {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 32%;
      margin: 5px;
    }
  }

  .form {
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
